﻿<!DOCTYPE html>
<html lang="es">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Sistema </title>
    <head>
		<link rel="stylesheet" href="bootstrap/css/bootstrap.css" />
		<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
		<link rel="stylesheet" href="bootstrap/css/bootstrap-theme.css" />
		<link rel="stylesheet" href="css/smoothness/jquery-ui-1.10.4.custom.min.css" />
		<link rel="stylesheet" href="css/ui.jqgrid.css" />
		<script src="js/jquery-1.10.2.js"></script>
		<script src="js/jquery.jqGrid.min.js"></script>
		<script src="js/jquery.jqGrid.src.js"></script>
		<script src="js/jquery-ui.js"></script>
		<script src="js/grid.locale-es.js"></script>
		<script src="bootstrap/js/bootstrap.js"></script>
		<script src="bootstrap/js/bootstrap.min.js"></script>
        <script src="highcharts/highcharts.js"></script>
        <script src="highcharts/modules/exporting.js"></script>

        <style>
            .center-block {
                float: none;
                margin-left: auto;
                margin-right: auto;
            }

            .input-group .icon-addon .form-control {
                border-radius: 0;
            }

            .icon-addon {
                position: relative;
                color: #555;
                display: block;
            }

                .icon-addon:after,
                .icon-addon:before {
                    display: table;
                    content: " ";
                }

                .icon-addon:after {
                    clear: both;
                }

                .icon-addon.addon-md .glyphicon,
                .icon-addon .glyphicon,
                .icon-addon.addon-md .fa,
                .icon-addon .fa {
                    position: absolute;
                    z-index: 2;
                    left: 10px;
                    font-size: 14px;
                    width: 20px;
                    margin-left: -2.5px;
                    text-align: center;
                    padding: 10px 0;
                    top: 1px;
                }

                .icon-addon.addon-lg .form-control {
                    line-height: 1.33;
                    height: 40px;
                    font-size: 18px;
                    padding: 10px 16px 10px 40px;
                }

                .icon-addon.addon-sm .form-control {
                    height: 30px;
                    padding: 5px 10px 5px 28px;
                    font-size: 12px;
                    line-height: 1.5;
                }

                .icon-addon.addon-lg .fa,
                .icon-addon.addon-lg .glyphicon {
                    font-size: 18px;
                    margin-left: 0;
                    left: 11px;
                }

                .icon-addon.addon-md .form-control,
                .icon-addon .form-control {
                    padding-left: 30px;
                    float: left;
                    font-weight: normal;
                }

                .icon-addon.addon-sm .fa,
                .icon-addon.addon-sm .glyphicon {
                    margin-left: 0;
                    font-size: 12px;
                    left: 5px;
                    top: -1px;
                }

                .icon-addon .form-control:focus + .glyphicon,
                .icon-addon:hover .glyphicon,
                .icon-addon .form-control:focus + .fa,
                .icon-addon:hover .fa {
                    color: #2580db;
                }

            .form-control {
                font-size: 12px;
                height: 28px;
                padding: 5px 12px;
            }

            body {
                font-size: 12px !important;
                overflow-y: scroll;
                overflow-x: hidden;
            }

            .btn {
                padding: 4px 12px;
                font-size: 12px;
            }

            a:link {
                font-size: 12px;
                text-decoration: none;
            }

            a:hover {
                background: #CEECF5;
            }

            .form-group {
                margin-bottom: 10px;
            }

            .ui-jqgrid .ui-pg-input {
                height: 18px !important;
                font-size: .8em;
                margin: 0;
            }

            .ui-jqgrid .ui-jqgrid-btable {
                table-layout: auto;
            }

            .ui-widget-overlay {
                opacity: 0.7;
                background: "rgb(0, 0, 0)";
            }
        </style>
        <script>
            var maxItems = 30;
            var pixcels = 30;


            var sessionBalanceo = "balanceoProveedor";

            var Storage = {
                Exists: function (name) {
                    var item = sessionStorage.getItem(name);
                    return (item != null);
                },
                Get: function (name) {
                    return JSON.parse(sessionStorage.getItem(name));
                },
                Set: function (name, value, days) {
                    sessionStorage.setItem(name, JSON.stringify(value))
                },
                Remove: function (name) {
                    sessionStorage.removeItem(name);
                }
            }


            var isBalance = Storage.Get(sessionBalanceo);

            if (isBalance != null && isBalance == true) {
                Storage.Set(sessionBalanceo, false);
            }
            else {
                isBalance = false;
            }


            function ObtenerAsistentes() {
                var assitentes = new Array();

                for (var i = 1; i <= maxItems ; i++) {
                    assitentes.push('Asistente ' + i);
                }

                return assitentes;
            }
            function ObtenerDataDistribucionActual() {
                var initial = [50, 38, 42, 77, 23, 64, 34, 57, 31, 71];
                var data = new Array();
                for (var i = 1; i <= (maxItems / initial.length) ; i++) {
                    data = data.concat(initial);
                }

                return data;
            }

            function ObtenerDataBalanceo() {
                var initial = [28, 40, 36, 1, 54, 14, 44, 20, 46, 6];
                var data = new Array();
                for (var i = 1; i <= (maxItems / initial.length) ; i++) {
                    data = data.concat(initial);
                }

                return data;
            }
            function ObtenerDataDistribucionBalanceada() {
                var initial = [78, 78, 78, 78, 77, 78, 78, 77, 77, 77];
                var data = new Array();
                for (var i = 1; i <= (maxItems / initial.length) ; i++) {
                    data = data.concat(initial);
                }

                return data;
            }
            function ObtenerTotalAsignar() {
                var dataAsignar = ObtenerDataBalanceo();
                var total = 0;
                $.each(dataAsignar, function (index, value) {
                    total += value;
                });

                return total;
            }

            function ObtenerTotalAsignado() {
                var dataAsignar = isBalance ? ObtenerDataDistribucionBalanceada() : ObtenerDataDistribucionActual();
                var total = 0;
                $.each(dataAsignar, function (index, value) {
                    total += value;
                });

                return total;
            }

            $(document).ready(function () {
                $("#divGrilla").hide();
                $("#divMensaje").hide();
                var valorAsignar = ObtenerTotalAsignar();
                var valorAsignado = ObtenerTotalAsignado();
                if (isBalance) {
                    valorAsignar = 0;
                }
                $('#spanTotalAsignar').text(valorAsignar);
                $('#spanTotalAsignarConfirmar').text(valorAsignar);
                $('#spanTotalAsignado').text(valorAsignado);


                $("#divGrilla").dialog({
                    autoOpen: false,
                    modal: true,
                    width: 600,
                    draggable: true,
                    maximize: false,
                    resizable: false,
                    position: 'middle',
                    close: "Cerrar",
                    title: "Nuevos Proveedores Asignados"
                });

                $("#divMensaje").dialog({
                    autoOpen: false,
                    modal: true,
                    width: 300,
                    draggable: true,
                    maximize: false,
                    resizable: false,
                    position: 'middle',
                    title: "Mensaje de Confirmación"
                });

                $("#divMensaje2").dialog({
                    autoOpen: false,
                    modal: true,
                    width: 300,
                    draggable: true,
                    maximize: false,
                    resizable: false,
                    position: 'middle',
                    title: "Advertencia"
                });

                Cargar();

                $("#btnBalancearAceptar").click(function () {
                    $("#divMensaje").dialog("close");
                    Balancear();
                });

                $("#btnBalancearAceptarMensaje2").click(function () {
                    $("#divMensaje2").dialog("close");
                });

                $("#btnBalancearCancelar").click(function () {
                    $("#divMensaje").dialog("close");
                });

            });

            function alerta(obj) {
                $("#divGrilla").dialog("open");
            }

            function Cargar() {
                $('#container').height(maxItems * pixcels);
                $(function () {

                    $('#container').highcharts( {
                        chart: {
                            type: 'bar'
                        },
                        title: {
                            text: ''
                        },
                        xAxis: {
                            categories: ObtenerAsistentes()
                        },
                        yAxis: {
                            min: 0,
                            max: 100,
                            title: {
                                text: 'Cantidad de Proveedores'
                            }
                        },
                        legend: {
                            reversed: true
                        },
                        plotOptions: {
                            series: {
                                stacking: 'normal'
                            }
                        },
                        series: [{
                            name: 'Proveedores Actualmente Asignados',
                            data: isBalance ? ObtenerDataDistribucionBalanceada() : ObtenerDataDistribucionActual()
                        }],
                        colors: ['#2f7ed8', '#910000'],
                        credits: {
                            enabled: false
                        }
                    });
                });
            }

            function Mostrar() {
                if ($('#spanTotalAsignar').text() != "0") {
                    $("#divMensaje").dialog("open");
					$("#grid").jqGrid({
						colNames: ['Codigo', 'Proveedor'],
						colModel: [
							{ name: 'Codigo', index: 'Codigo', width: 150, align: 'center', sortable: false },
							{ name: 'Proveedor', index: 'Proveedor', width: 400, align: 'center', sortable: false },
						],
						width: 550,
						height: '100%',
						pager: $('#divgrid'),
						rowNum: 10,
						rowList: [5, 10, 20, 50],
						page: 1,
						viewrecords: true,
						altRows: false,
						rownumbers: false,
						ignoreCase: true,
						gridview: true,
						loadtext: 'Cargando datos...',
						emptyrecords: 'No hay resultados',
					}).jqGrid('navGrid', '#divgrid', { search: false, edit: false, add: false, del: false });
					var data = [
						{ Codigo: '001', Proveedor: 'Proveedor 1' },
						{ Codigo: '002', Proveedor: 'Proveedor 2' },
						{ Codigo: '003', Proveedor: 'Proveedor 3' },
					];
					for (var i = 0; i <= data.length; i++)
						$("#grid").addRowData(i + 1, data[i]);
					}
                else {
                    $("#divMensaje2").dialog("open");
                }
            }

            function Balancear() {

                $('#spanTotalAsignar').text(0);
                $('#spanTotalAsignarConfirmar').text(0);
                $('#container').height(maxItems * pixcels);

                Storage.Set("balanceoProveedor", true);

                $('#spanTotalAsignado').text((ObtenerTotalAsignado() + ObtenerTotalAsignar()));

                $(function () {
                    $('#container').highcharts({
                        chart: {
                            type: 'bar'
                        },
                        title: {
                            text: ''
                        },
                        xAxis: {
                            categories: ObtenerAsistentes()
                        },
                        yAxis: {
                            min: 0,
                            max: 100,
                            title: {
                                text: 'Cantidad de Proveedores'
                            }
                        },
                        legend: {
                            reversed: true
                        },
                        plotOptions: {
                            series: {
                                stacking: 'normal'
                            }
                        },
                        series: [{
                            name: 'Nuevos Proveedores Asignados',
                            data: ObtenerDataBalanceo()
                        }, {
                            name: 'Proveedores Actualmente Asignados',
                            data: ObtenerDataDistribucionActual()
                        }],
                        colors: ['#8bbc21', '#2f7ed8'],
                        tooltip: {
                            headerFormat: '<label style="padding-right:2px">{point.key}</label><input type="button" name="{point.key}" value="ver" onclick="alerta(this)"/>',
                            useHTML: true
                        },
                        credits: {
                            enabled: false
                        }
                    });
                });
            }

        </script>

    </head>
    <body>
        <div class="container">
            <div class="row" style="padding-top: 10px">
            </div>
            <div class="row">
                <div class="col-xs-12">
                    <div class="pull-right" style="padding-right: 13px;">
                        <span class="link">
                            <span class=" glyphicon glyphicon-user"></span>gramos</span>
                        <a href="#">Cerrar</a>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12">
                    <div class="page-header clearfix" style="background: #ef2a24; border-radius: 3px; padding-top: 20px; padding-left: 10px; padding-left: 10px; padding-bottom: 10px; margin: 10px; color: #fff;">
                        <div class="col-md-4">
                            <div class="pull-left">
                                <img style="display: block; max-width: 100%; width: 50%; height: 50%;" src="images/logo.jpg"></img>
                            </div>
                        </div>
                        <div class="col-md-8">
                            <div class="pull-right">
                                <form class="form-inline form-search">
                                    <div class="form-group" style="float: left">
                                        <label style="padding-top: 5px; padding-right: 10px; padding-top: 12px;" class="control-label" for="txtFilterText">Proveedor</label>
                                    </div>
                                    <div class="icon-addon addon-lg" style="float: left">
                                        <input style="width: 250px; font-size: small;" type="text" placeholder="Nombre o Nro de Documento" class="form-control">
                                        <label class="glyphicon glyphicon-search" rel="tooltip" title=""></label>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="panel-default">
                    <div class="col-xs-12">
                        <div class="col-md-3">
                            <div class="panel-group" id="accordion">
                                <div class="panel panel-default">
                                    <div class="panel-heading">
                                        <h4 class="panel-title">
                                            <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">Asignación</a>
                                        </h4>
                                    </div>
                                    <div id="collapseOne" class="panel-collapse collapse">
                                        <div class="panel-body" style="font-size: 13px">
                                            <p><a href="AsignacionAsistentesporBanca.html">Asignación de Asistentes por Banca</a></p>
                                            <p><a href="#">Asignación Manual de Proveedores Sin Banca</a></p>
                                            <p><a href="ReasignacionAsistentesporBanca.html">Reasignación de Asistentes por Banca</a></p>
                                            <p><a href="BalanceoGeneralAsignacionProveedores.html">Balanceo General de la Asignación de Proveedores</a></p>
                                        </div>
                                    </div>
                                </div>
                                <div class="panel panel-default">
                                    <div class="panel-heading">
                                        <h4 class="panel-title">
                                            <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">Carga de Proveedores</a>
                                        </h4>
                                    </div>
                                    <div id="collapseTwo" class="panel-collapse collapse">
                                        <div class="panel-body">
                                            <p><a href="#">Registro Masivo</a></p>
                                            <p><a href="#">Registro Individual</a></p>
                                        </div>
                                    </div>
                                </div>
                                <div class="panel panel-default">
                                    <div class="panel-heading">
                                        <h4 class="panel-title">
                                            <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">Gestión de Proveedores</a>
                                        </h4>
                                    </div>
                                    <div id="collapseThree" class="panel-collapse collapse">
                                        <div class="panel-body">
                                            <p><a href="#">Bandeja de Proveedores</a></p>
                                        </div>
                                    </div>
                                </div>
                                <div class="panel panel-default">
                                    <div class="panel-heading">
                                        <h4 class="panel-title">
                                            <a data-toggle="collapse" data-parent="#accordion" href="#collapseFour">Gestión de Pagos Proveedores</a>
                                        </h4>
                                    </div>
                                    <div id="collapseFour" class="panel-collapse collapse">
                                        <div class="panel-body">
                                            <p><a href="#">Bandeja de Pagos Proveedores</a></p>
                                        </div>
                                    </div>
                                </div>
                                <div class="panel panel-default">
                                    <div class="panel-heading">
                                        <h4 class="panel-title">
                                            <a data-toggle="collapse" data-parent="#accordion" href="#collapseFive">Tablero de Control</a>
                                        </h4>
                                    </div>
                                    <div id="collapseFive" class="panel-collapse collapse">
                                        <div class="panel-body">
                                            <p><a href="BandejaTableroControl.html">Bandeja del Tablero de Control</a></p>
                                        </div>
                                    </div>
                                </div>
                                <div class="panel panel-default">
                                    <div class="panel-heading">
                                        <h4 class="panel-title">
                                            <a data-toggle="collapse" data-parent="#accordion" href="#collapseSix">Configuración de Políticas</a>
                                        </h4>
                                    </div>
                                    <div id="collapseSix" class="panel-collapse collapse">
                                        <div class="panel-body">
                                            <p><a href="#">Mantenimiento</a></p>
                                            <p><a href="#">Valores de Parámetros Generales</a></p>
                                            <p><a href="#">Mantenimiento de Asistentes</a></p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-9">
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <strong>Balanceo General de la Asignación de Proveedores</strong>
                                </div>
                                <div class="panel-body">
                                    <form>
                                        <div class="row" style="padding-top: 10px; padding-bottom: 10px">
                                            <div class="col-md-6" style="text-align: left">
                                                <div>
                                                    <span class="fa fa-info-circle"></span>
                                                    <span id="informacion">Proveedores sin banca por Asignar: <span id="spanTotalAsignar"></span></span>
                                                </div>
                                                <div style="margin-top: 10px">
                                                    <span>Proveedores sin banca asignada: <span id="spanTotalAsignado"></span></span>
                                                </div>
                                            </div>
                                            <div class="col-md-6" style="text-align: right">
                                                <input id="btnBalancear" onclick="Mostrar()" type="button" class="btn btn-default btn-filter" value="Balancear">
                                            </div>
                                        </div>
                                    </form>
                                    <div style="max-height: 300px; overflow-y: scroll;">
                                        <div id="container" style="min-width: 310px; max-width: 800px; height: 1000px; margin: 0 auto">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div id="divMensaje" style="overflow-x: hidden">
                            <form>
                                <div class="row">
                                    <div class="form-horizontal" accept-charset="utf-8">
                                        <div style="text-align: center">
                                            Esta seguro de realizar el Balanceo de <span id="spanTotalAsignarConfirmar"></span>&nbsp; proveedores?
                                        </div>
                                        <hr>
                                        <div class="form-group" style="text-align: center;">
                                            <label class="col-sm-5 control-label" style="padding-right: 10px"></label>
                                            <div class="col-sm-7">
                                                <div style="text-align: center;">
                                                    <input id="btnBalancearAceptar" type="button" class="btn btn-default btn-filter" value="Aceptar">
                                                    <input id="btnBalancearCancelar" type="button" class="btn btn-default btn-filter" value="Salir">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div id="divMensaje2" style="overflow-x: hidden">
                            <form id="Form1">
                                <div class="row">
                                    <div class="form-horizontal" accept-charset="utf-8">
                                        <div id="Div2" style="text-align: center">
                                            No existe Proveedores disponibles a asignar
                                        </div>
                                        <hr>
                                        <div class="form-group" style="text-align: center;">
                                            <label id="Label1" class="col-sm-5 control-label" style="padding-right: 10px"></label>
                                            <div class="col-sm-7">
                                                <div style="text-align: center;">
                                                    <input id="btnBalancearAceptarMensaje2" type="button" class="btn btn-default btn-filter" value="Aceptar">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div id="divGrilla" style="overflow-x: hidden">
							<table id="grid"></table>
							<div id="divgrid"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="footer" style="background: #ef2a24; border-radius: 3px; padding-top: 20px; padding-left: 10px; padding-left: 10px; padding-bottom: 10px; margin: 10px; color: #fff;">
                <div class="container">
                    <div class="col-xs-12">
                        <div style="width: 50%; float: left; text-align: left">
                            <p>Scotiabank - Todos los Derechos Reservados 2014</p>
                        </div>
                        <div style="width: 50%; float: right; text-align: right; padding-right: 50px;">
                            <p>
                                Powered by <a href="#">
                                    <img src="images/gmd.jpg" alt="Graña y Montero"></a>
                            <p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

